Перейти к основному содержимому

Инструменты web-разработчика (DevTools)

Пожалуйста, ознакомьтесь с Правилами использования материалов на данном ресурсе.

🔗 Оригинальная страница — Источник данного материала

Инструменты web-разработчика (DevTools)

Описание​

DevTools - очень мощный инструмент для работы с HTML страницей, анализа запросов, отладки JavaScript.

Внимание

Инструменты web-разработчика доступны только для Chrome движка.

image-20210601-124831

Как открыть окно?​

Отобразить окно можно кликнув по соответствующей кнопке справа от адресной строки ❗→ браузера ProjectMaker

image-20211226-161922

Для чего это используется?​

  • Взаимодействие с DOM моделью страницы (поиск элементов, удаление, модификация)
  • Анализ сделанных страницей ❗→ запросов

Как пользоваться​

Кнопка Inspect​

image-20210601-130008

Нажмите эту кнопку и наведите курсор мыши на любой элемент в окне браузере и этот элемент тут же будет подсвечен во вкладке *Elements.

Вкладка Elements​

image-20210601-125200

В данной вкладке можно проанализировать и модифицировать DOM текущей вкладки - изменить HTML код элементов (удалить или добавить атрибуты), можно вырезать часть элементов.

Поиск по XPath​

Данное окно можно использовать для тестирования ❗→ XPath запросов: открываете вкладку *Elements, нажимаете комбинацию клавиш Ctrl+F, внизу окна появится поле для ввода поисковой фразы (1) (можно вводить простой текст, XPath, CSS Selector'ы). Найденные элементы сразу будут подсвечиваться (2).

image-20210601-124547

Вкладка Console​

Тут можно составить и отладить JavaScript код. Весь код выполняется в контексте текущей вкладки, т.е. тут доступны все модули, библиотеки, объекты, которые загружены на текущей странице. Когда код будет готов его можно будет запустить с помощью экшена ❗→ Код JavaScript

Вкладка Network​

image-20210601-130903

Здесь будут отображены все запросы, которые были отправлены при загрузке данной страницы. Это может очень помочь при написании собственных ❗→ запросов.

Полезные ссылки​